.text-blue {
  color: var(--theme-blue);
}
.bg-blue {
  background-color: var(--theme-blue);
}
.text-indigo {
  color: var(--theme-indigo);
}
.bg-indigo {
  background-color: var(--theme-indigo);
}
.text-purple {
  color: var(--theme-purple);
}
.bg-purple {
  background-color: var(--theme-purple);
}
.text-pink {
  color: var(--theme-pink);
}
.bg-pink {
  background-color: var(--theme-pink);
}
.text-red {
  color: var(--theme-red);
}
.bg-red {
  background-color: var(--theme-red);
}
.text-orange {
  color: var(--theme-orange);
}
.bg-orange {
  background-color: var(--theme-orange);
}
.text-yellow {
  color: var(--theme-yellow);
}
.bg-yellow {
  background-color: var(--theme-yellow);
}
.text-green {
  color: var(--theme-green);
}
.bg-green {
  background-color: var(--theme-green);
}
.text-teal {
  color: var(--theme-teal);
}
.bg-teal {
  background-color: var(--theme-teal);
}
.text-cyan {
  color: var(--theme-cyan);
}
.bg-cyan {
  background-color: var(--theme-cyan);
}
.text-gray {
  color: var(--theme-gray);
}
.bg-gray {
  background-color: var(--theme-gray);
}
